/**
*  @file refresh/realtime.js
*  实时刷新
*
*/

import React, { PropTypes, PureComponent } from 'react';
// import $ from 'jquery';

let Timer;

export default class Realfile extends PureComponent {

	componentDidMount() {
		if (location.href.indexOf('token') > -1) {
			const url = location.href.toString();
			const arrUrl = url.split('?');
			var token = arrUrl[1].split('#')[0].slice(6);
		} else {
			var token = '';
		}
		const fetchData = () => {
			$.ajax({
				type: 'GET',
				url: location.href.indexOf('localhost')>-1?'/api/ifdata/realtime':'/thfx/api/ifdata/realtime',
				beforeSend(request) {
					request.setRequestHeader('Authorization', token);
				},
				dataType: 'json',
				data: {},
				success: (ret) => {
					$('#mytable_1 tbody tr').remove();
					$.each(ret.data[0], (i, n) => {
						let tbody = document.getElementsByTagName('tbody');
						tbody += `<tr><td>${n.fundId}</td>` + `<td>${n.combiNo}</td>` + `<td>${n.combiName}</td>` + `<td>${n.instanceId}</td>` +
							`<td>${n.stockCode}</td>` + `<td>${n.tradeDirection}</td>` + `<td>${n.avgBasisSpread}</td>` + `<td>${n.dealAmount}</td>` + `<td>${n.tradeType}</td></tr>`;
						$('#mytable_1').append(tbody);
					});

					$('#mytable_3 tbody tr').remove();
					$.each(ret.data[2], (i, n) => {
						let tbBody = '';
						tbBody += `<tr><td>${n.fundId}</td>` + `<td>${n.combiNo}</td>` + `<td>${n.combiName}</td>` + `<td>${n.instanceId}</td>`
							+ `<td>${n.totalProfit}</td>` + `<td>${n.basisSpreadProfit}</td>` + `<td>${n.betaProfit}</td>` + `<td>${n.cost}</td>` +
							`<td>${n.alphaProfit}</td>` + `<td>${n.alphaAndCost}</td>` + `<td>${n.totalShortValue}</td>` + `<td>${n.totalLongValue}</td></tr>`;
						$('#mytable_3 ').append(tbBody);
					});
					$('#mytable_4 tbody tr').remove();
					$.each(ret.data[3], (i, n) => {
						let tbBody = '';
						tbBody += `<tr><td>${n.fundId}</td>` + `<td>${n.combiNo}</td>` + `<td>${n.combiName}</td>` + `<td>${n.totalProfit}</td>`
							+ `<td>${n.basisSpreadProfit}</td>` + `<td>${n.betaProfit}</td>` + `<td>${n.cost}</td>` +
							`<td>${n.alphaProfit}</td>` + `<td>${n.alphaAndCost}</td>` + `<td>${n.totalShortValue}</td>` + `<td>${n.totalLongValue}</td></tr>`;
						$('#mytable_4 ').append(tbBody);
					});
					$('#mytable_2 tbody tr').remove();
					$.each(ret.data[1], (i, n) => {
						let tbBody = '';
						tbBody += `<tr><td>${n.fundId}</td>` + `<td>${n.combiNo}</td>` + `<td>${n.combiName}</td>` + `<td>${n.instanceId}</td>` +
							`<td>${n.stockCode}</td>` + `<td>${n.contractType}</td>` + `<td>${n.endHoldingAmount}</td>` + `<td>${n.totalOpenAmount}</td>` + `<td>${n.openBasisSpread}</td>` +
							`<td>${n.totalCloseAmount}</td>` + `<td>${n.closeBasisSpread}</td>` + `<td>${n.eodBasisSpread}</td>` + `<td>${n.basisSpreadProfit}</td></tr>`;
						$('#mytable_2 ').append(tbBody);
					});
				},
				error: (xhr, textStatus, err) => {
					if (+xhr.status === 403 && xhr.responseJSON.message === 'Access Denied' || location.href.indexOf('token') === -1) {
						window.location.href = `${location.href.split('#')[0]}#/login`;
					} else if (location.href.indexOf('token') === 0) {
						window.location.href = `${location.href.split('#')[0]}#/`;
					}
				},
			});
		};
		fetchData();
		Timer = setInterval(() => {
			fetchData();
		}, 5000);
	}
	componentWillUnmount() {
		clearInterval(Timer);
	}

	render() {
		return (
			<div className="page-realtime-home content-inner">
				<h1>尊敬的客户，经分析您的套保账户盈利状况如下：</h1>
				<h3>实例操作流水</h3>
				<table id="mytable_1" width="96%" cellSpacing="0" className="realtable">
					<thead>
						<tr>
							<th>基金号</th>
							<th>组合号</th>
							<th>组合名称</th>
							<th>实例号</th>
							<th>证券名称</th>
							<th>交易类型</th>
							<th>平均基差</th>
							<th>数量</th>
							<th>汇总类型</th>
						</tr>
					</thead>
					<tbody />
				</table>
				<h3>实例盈亏</h3>
				<table id="mytable_3" width="96%" cellSpacing="0" className="realtable">
					<thead>
						<tr>
							<th>基金号</th>
							<th>组合号</th>
							<th>组合名称</th>
							<th>实例号</th>
							<th>实例总盈亏</th>
							<th>基差总盈亏</th>
							<th>贝塔盈亏</th>
							<th>成本</th>
							<th>阿尔法盈亏</th>
							<th>阿尔法盈亏+成本</th>
							<th>空头市值</th>
							<th>多头市值</th>
						</tr>
					</thead>
					<tbody />
				</table>
				<h3>组合盈亏</h3>
				<table id="mytable_4" width="96%" cellSpacing="0" className="realtable">
					<thead>
						<tr>
							<th>基金号</th>
							<th>组合号</th>
							<th>组合名称</th>
							<th>组合总盈亏</th>
							<th>基差总盈亏</th>
							<th>贝塔盈亏</th>
							<th>成本</th>
							<th>阿尔法盈亏</th>
							<th>阿尔法盈亏+成本</th>
							<th>空头市值</th>
							<th>多头市值</th>
						</tr>
					</thead>
					<tbody />
				</table>
				<h3>实例持仓</h3>
				<table id="mytable_2" width="96%" cellSpacing="0" className="realtable">
					<thead>
						<tr>
							<th>基金号</th>
							<th>组合号</th>
							<th>组合名称</th>
							<th>实例号</th>
							<th>证券名称</th>
							<th>多空</th>
							<th>持仓数</th>
							<th>开仓总数</th>
							<th>开仓基差</th>
							<th>平仓总数</th>
							<th>平仓基差</th>
							<th>收盘基差</th>
							<th>基差盈亏</th>
						</tr>
					</thead>
					<tbody />
				</table>
			</div>
		);
	}
}
